import React, { memo, useState } from 'react'
import { TabsWrapper } from './style'
import classNames from 'classnames'
import ScrollView from '../scroll-view'

const SectionTabs = memo((props) => {
  const { tabNames = [], tabCick } = props
  const [currentIndex, setCurrentIndex] = useState(0)

  function itemClickHandle(index, name) {
    setCurrentIndex(index)
    // 传递事件
    tabCick(index, name)
  }

  return (
    <TabsWrapper>
      <ScrollView>
        {tabNames.map((item, index) => {
          return (
            // npm install classnames
            <div className={classNames('item', { active: currentIndex === index })} key={item} onClick={() => itemClickHandle(index, item)}>
              {item}
            </div>
          )
        })}
      </ScrollView>
    </TabsWrapper>
  )
})

export default SectionTabs
